import React, { ReactNode, useEffect, useState } from 'react';
import { Upload, Input, message } from 'antd';
import type { UploadProps } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import b from './banner.module.scss'
import Welcome from '../../components/Welcome';
import axios from 'axios';
import { UploadChangeParam } from 'antd/es/upload';
import { useNavigate } from 'react-router-dom';


// bannerList 的类型
interface bannerListType {
    banner_path?: string,
    banner_text?: string
}


function banner() {
    const navigate = useNavigate();

    /* ------------------------------ 请求当前banner信息 ------------------------------ */
    const [bannerList, setBannerList] = useState<bannerListType[]>([])
    const getBannerList = async () => {
        let data = await axios({
            method: 'get',
            url: 'http://localhost:8080/api/banner/getBanner'
        })
        if (data.status === 200) {
            setBannerList(data.data.data)
            console.log('111');

        }
    }
    useEffect(() => {
        getBannerList()
    }, [])

    const [loading, setLoading] = useState(false);
    const uploadButton = (
        <button style={{ border: 0, background: 'none' }} type="button">
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </button>
    );

    const [messageApi, contextHolder] = message.useMessage();
    const blurAction = (idx: number) => async (e: any) => {
        setBannerList((arr: bannerListType[]): bannerListType[] => {
            arr.some((item, index) => {
                if (index === idx) {
                    item.banner_text = e.target.value
                    return true
                }
            })
            return arr
        })
        // 更新完后发起请求更新数据库
        let data = await axios({
            method: 'post',
            url: 'http://localhost:8080/api/banner/updateBannerText',
            data: {
                bannerList
            }
        })
        if (data.status === 200) {
            messageApi.open({
                key: 'updateText',
                type: 'loading',
                content: '正在修改banner...',
            });
            setTimeout(() => {
                messageApi.open({
                    key: 'updateText',
                    type: 'success',
                    content: '修改成功!',
                    duration: 2,
                });
            }, 1000);
        }
    }

    /* ------------------------------- 更换banner图片 ------------------------------- */
    const changeAction = (info: UploadChangeParam): void => {
        if (info.file.status === 'done') {
            console.log('文件上传成功');
            getBannerList()
            // 需要手动刷新
            window.location.reload()
            messageApi.open({
                key: 'updateBanner',
                type: 'success',
                content: '修改banner图片成功'
            })
        }
    }


    return (
        <div className={b.page}>
            {contextHolder}
            <div className={b.container}>
                <div className={b.welcome}>
                    <Welcome></Welcome>
                </div>
                <div className={b.title}>更换banner</div>
                <div className={b.bannerWrap}>
                    {/* <Image src='../../assets/images/shoesdogLogo1.png'></Image> */}
                    {
                        bannerList.map((item, index) => {
                            return <div className={b.bannerItem} key={index}>
                                <div className={b.itemTitle}>banner图片 {index + 1}:</div>
                                <div className={b.itemImg}>
                                    <Upload
                                        name="banner"
                                        listType="picture"
                                        className={b.imgUpload}
                                        showUploadList={false}
                                        data={{ banner_id: index + 1 }}
                                        action="http://localhost:8080/api/banner/updateBannerPhoto"
                                        onChange={changeAction} 
                                    >
                                        {item ? <img src={item.banner_path} alt="avatar" /> : uploadButton}
                                    </Upload>
                                </div>
                                <hr />
                                <div className={b.itemTitle}>banner描述 {index + 1}:</div>
                                <div className={b.itemText}>
                                    <Input.TextArea onBlur={blurAction(index)} size='large' placeholder={item.banner_text} defaultValue={item.banner_text}></Input.TextArea>
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    );
}

export default banner;